React Suspense yuklanish holatini kompozitsiyasi: Ichma-ich yuklanishni boshqarish

React Suspense, React 16.6 da taqdim etilgan, ilovangizda yuklanish holatlarini boshqarishning deklarativ usulini taqdim etadi. U sizga komponentning bog'liqliklari (ma'lumotlar yoki kod kabi) tayyor bo'lgunga qadar uning ko'rsatilishini "to'xtatib turish" imkonini beradi. Uning asosiy qo'llanilishi nisbatan oddiy bo'lsa-da, Suspense-ni o'zlashtirish yuklanish holatlarini samarali kompozitsiya qilishni tushunishni o'z ichiga oladi, ayniqsa ichma-ich yuklanish senariylari bilan ishlashda. Ushbu maqola React Suspense va uning silliq va yoqimli foydalanuvchi tajribasi uchun ilg'or kompozitsiya usullari bo'yicha keng qamrovli qo'llanmani taqdim etadi.

React Suspense asoslarini tushunish

Asosiy qismida, Suspense - fallback propini qabul qiluvchi React komponentidir. Ushbu fallback Suspense tomonidan o'ralgan komponent(lar) nimadir yuklanishini kutayotganda ko'rsatiladi. Eng keng tarqalgan foydalanish holatlari quyidagilarni o'z ichiga oladi:

• React.lazy bilan kodni ajratish: Dastlabki paket hajmini kamaytirish uchun komponentlarni dinamik ravishda import qilish.
• Ma'lumotlarni olish: Komponentga bog'liq bo'lgan komponentni ko'rsatishdan oldin API-dan ma'lumotlarning hal qilinishini kutish.

React.lazy bilan kodni ajratish

React.lazy React komponentlarini talab bo'yicha yuklash imkonini beradi. Bu sizning ilovangizning dastlabki yuklanish vaqtini sezilarli darajada yaxshilashi mumkin, ayniqsa ko'plab komponentlarga ega bo'lgan katta ilovalar uchun. Quyida oddiy misol keltirilgan:

            import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<p>Yuklanmoqda...</p>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

Ushbu misolda, MyComponent faqat kerak bo'lganda yuklanadi. U yuklanayotganda, fallback (bu holda, oddiy "Yuklanmoqda..." xabari) ko'rsatiladi.

Suspense bilan ma'lumotlarni olish

React.lazy Suspense bilan darhol ishlaydi, ammo ma'lumotlarni olish bir oz boshqacha yondashuvni talab qiladi. Suspense fetch yoki axios kabi standart ma'lumotlarni olish kutubxonalari bilan to'g'ridan-to'g'ri integratsiya qilinmaydi. Buning o'rniga, ma'lumotlarni kutayotganda komponentni "to'xtatib turishi" mumkin bo'lgan kutubxonadan yoki naqshdan foydalanishingiz kerak. Ommabop yechim swr yoki react-query kabi ma'lumotlarni olish kutubxonasidan foydalanishni yoki maxsus resurslarni boshqarish strategiyasini amalga oshirishni o'z ichiga oladi.

Maxsus resurslarni boshqarish yondashuvidan foydalanishning kontseptual namunasi:

            // Resource.js
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise.then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }
      return result;
    },
  };
};

export default createResource;

// MyComponent.js
import React from 'react';
import createResource from './Resource';

const fetchData = () =>
  new Promise((resolve) =>
    setTimeout(() => resolve({ data: 'Olingan ma'lumotlar!' }), 2000)
  );

const resource = createResource(fetchData());

function MyComponent() {
  const data = resource.read();
  return <p>{data.data}</p>;
}

export default MyComponent;

// App.js
import React, { Suspense } from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <Suspense fallback={<p>Ma'lumotlar yuklanmoqda...</p>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

Tushuntirish:

• createResource: Ushbu funktsiya va'dani oladi va read usuliga ega bo'lgan obyektni qaytaradi.
• read: Ushbu usul va'daning holatini tekshiradi. Agar u kutilayotgan bo'lsa, u va'dani tashlaydi, bu komponentni to'xtatib turadi. Agar u hal qilingan bo'lsa, u ma'lumotlarni qaytaradi. Agar u rad etilgan bo'lsa, u xatoni tashlaydi.
• MyComponent: Ushbu komponent ma'lumotlarga kirish uchun resource.read() usulidan foydalanadi. Agar ma'lumotlar tayyor bo'lmasa, komponent to'xtatiladi.
• App: Ma'lumotlar yuklanayotganda fallback UI-ni taqdim etib, MyComponent-ni Suspense ichiga o'rab oladi.

Yuklash holatlarini kompozitsiya qilish: Ichma-ich Suspense kuchi

Suspense-ning haqiqiy kuchi uning kompozitsiyalash qobiliyatida yotadi. Yanada donador va murakkab yuklanish tajribasini yaratish uchun Suspense komponentlarini ichma-ich joylashtirishingiz mumkin. Bu, ayniqsa, bir nechta asinxron bog'liqliklarga ega bo'lgan komponentlar bilan ishlashda yoki UI-ning ma'lum qismlarini yuklashga ustuvorlik berishni istaganingizda foydalidir.

Asosiy ichma-ich Suspense

Keling, sarlavha, asosiy kontent maydoni va yon paneli bo'lgan sahifangiz bor deb tasavvur qilaylik. Ushbu komponentlarning har biri o'z asinxron bog'liqliklariga ega bo'lishi mumkin. Har bir bo'lim uchun alohida yuklanish holatlarini ko'rsatish uchun ichma-ich Suspense komponentlaridan foydalanishingiz mumkin.

            import React, { Suspense, lazy } from 'react';

const Header = lazy(() => import('./Header'));
const MainContent = lazy(() => import('./MainContent'));
const Sidebar = lazy(() => import('./Sidebar'));

function App() {
  return (
    <div>
      <Suspense fallback={<p>Sarlavha yuklanmoqda...</p>}>
        <Header />
      </Suspense>
      <div style={{ display: 'flex' }}>
        <Suspense fallback={<p>Asosiy kontent yuklanmoqda...</p>}>
          <MainContent />
        </Suspense>
        <Suspense fallback={<p>Yon panel yuklanmoqda...</p>}>
          <Sidebar />
        </Suspense>
      </div>
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

Ushbu misolda, har bir komponent (Header, MainContent va Sidebar) o'z Suspense chegarasiga o'ralgan. Bu Header hali ham yuklanayotgan bo'lsa, "Sarlavha yuklanmoqda..." xabari ko'rsatiladi, shu bilan birga MainContent va Sidebar mustaqil ravishda yuklanishi mumkin. Bu yanada javob beruvchi va ma'lumot beruvchi foydalanuvchi tajribasini ta'minlaydi.

Yuklash holatlariga ustuvorlik berish

Ba'zan, siz UI-ning ma'lum qismlarini yuklashga ustuvorlik berishingiz mumkin. Misol uchun, siz sarlavha va navigatsiya asosiy kontentdan oldin yuklanganligiga ishonch hosil qilmoqchi bo'lishingiz mumkin. Bunga Suspense komponentlarini strategik joylashtirish orqali erishishingiz mumkin.

            import React, { Suspense, lazy } from 'react';

const Header = lazy(() => import('./Header'));
const MainContent = lazy(() => import('./MainContent'));

function App() {
  return (
    <Suspense fallback={<p>Sarlavha va kontent yuklanmoqda...</p>}>
      <Header />
      <Suspense fallback={<p>Asosiy kontent yuklanmoqda...</p>}>
        <MainContent />
      </Suspense>
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

Ushbu misolda, Header va MainContent ikkalasi ham bitta, tashqi Suspense chegarasiga o'ralgan. Bu "Sarlavha va kontent yuklanmoqda..." xabari ham Header, ham MainContent yuklangunga qadar ko'rsatiladi degan ma'noni anglatadi. MainContent uchun ichki Suspense faqat Header allaqachon yuklangan bo'lsa, ishga tushadi va kontent maydoni uchun yanada donador yuklanish tajribasini taqdim etadi.

Ilg'or ichma-ich yuklashni boshqarish

Asosiy ichma-ich joylashtirishdan tashqari, siz murakkab ilovalarda yuklanish holatlarini boshqarish uchun yanada ilg'or usullardan foydalanishingiz mumkin. Bularga quyidagilar kiradi:

• Maxsus fallback komponentlari: Yanada vizual jozibali va ma'lumotli yuklanish ko'rsatkichlaridan foydalanish.
• Xatolarni chegaralar bilan boshqarish: Yuklash paytida yuzaga keladigan xatolarni oqlangan holda boshqarish.
• Debansing va tezlikni cheklash: Komponent ma'lumotlarni yuklashga urinishlar sonini optimallashtirish.
• Suspense-ni o'tishlar bilan birlashtirish: Yuklangan va yuklangan holatlar o'rtasida silliq o'tishlarni yaratish.

Maxsus fallback komponentlari

Fallbacks sifatida oddiy matn xabarlaridan foydalanish o'rniga, siz yaxshiroq foydalanuvchi tajribasini ta'minlaydigan maxsus fallback komponentlarini yaratishingiz mumkin. Ushbu komponentlar quyidagilarni o'z ichiga olishi mumkin:

• Aylanuvchilar: Animatsiyalangan yuklanish ko'rsatkichlari.
• Skeletlar: Haqiqiy kontentning tuzilishini taqlid qiladigan joy egallovchi UI elementlari.
• Progress bar: Yuklanish jarayonining vizual ko'rsatkichlari.

Skelet komponentini fallback sifatida ishlatish misoli:

            import React from 'react';
import Skeleton from 'react-loading-skeleton'; // Siz ushbu kutubxonani o'rnatishingiz kerak

function LoadingSkeleton() {
  return (
    <div>
      <Skeleton count={3} />
    </div>
  );
}

export default LoadingSkeleton;

// Foydalanish App.js
import React, { Suspense, lazy } from 'react';
import LoadingSkeleton from './LoadingSkeleton';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<LoadingSkeleton />}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

Ushbu misol MyComponent yuklanayotganda skelet joy egallovchilarini ketma-ketligini ko'rsatish uchun react-loading-skeleton kutubxonasidan foydalanadi.

Xatolarni chegaralar bilan boshqarish

Yuklash jarayonida yuzaga kelishi mumkin bo'lgan xatolarni boshqarish muhimdir. React Error Boundaries-ni taqdim etadi, ular o'zlarining child komponentlar daraxtidagi istalgan joyda JavaScript xatolarini ushlaydigan, ushbu xatolarni qayd qiladigan va fallback UI-ni ko'rsatadigan komponentlardir. Error Boundaries yaxshi ishlash uchun Suspense bilan xatolarni boshqarishning mustahkam mexanizmini ta'minlaydi.

            import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Keyingi ko'rsatish fallback UI-ni ko'rsatishi uchun holatni yangilang.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Siz xatoni xato hisobot xizmatiga ham yozishingiz mumkin
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Siz har qanday maxsus fallback UI-ni ko'rsatishingiz mumkin
      return <h1>Nimadir noto'g'ri ketdi.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

// Foydalanish App.js
import React, { Suspense, lazy } from 'react';
import ErrorBoundary from './ErrorBoundary';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<p>Yuklanmoqda...</p>}>
        <MyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;

            

              
                Copy
              
            
          

Ushbu misolda, ErrorBoundary komponenti Suspense komponentini o'rab oladi. Agar MyComponent-ni yuklash paytida xato yuzaga kelsa, ErrorBoundary xatoni ushlaydi va "Nimadir noto'g'ri ketdi." xabarini ko'rsatadi.

Debansing va tezlikni cheklash

Ba'zi hollarda, siz komponent ma'lumotlarni yuklashga urinishlar sonini cheklashingiz mumkin. Bu ma'lumotlarni olish jarayoni qimmatga tushsa yoki haddan tashqari API chaqiriqlarining oldini olishni istasangiz foydali bo'lishi mumkin. Debansing va tezlikni cheklash sizga bunga erishishga yordam beradigan ikkita texnikadir.

Debansing: Funktsiyaning bajarilishini oxirgi marta chaqirilganidan beri ma'lum vaqt o'tgandan keyin kechiktiradi.

Tezlikni cheklash: Funktsiyaning bajarilish tezligini cheklaydi.

Ushbu texnikalar ko'pincha foydalanuvchi kiritish hodisalariga qo'llanilsa-da, ular Suspense chegaralarida ma'lumotlarni boshqarish uchun ham ishlatilishi mumkin. Amalga oshirish siz foydalanayotgan ma'lumotlarni olish kutubxonasiga yoki resurslarni boshqarish strategiyasiga bog'liq bo'ladi.

Suspense-ni o'tishlar bilan birlashtirish

React Transitions API (React 18 da taqdim etilgan) ilovangizning turli xil holatlari, jumladan yuklanish va yuklangan holatlar o'rtasida silliq o'tishlarni yaratishga imkon beradi. Siz React-ga holat yangilanishining o'tish ekanligini bildirish uchun useTransition dan foydalanishingiz mumkin, bu esa UI yangilanishlarining chalkashishiga to'sqinlik qiladi.

            import React, { Suspense, lazy, useState, useTransition } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  const [isPending, startTransition] = useTransition();
  const [showComponent, setShowComponent] = useState(false);

  const handleClick = () => {
    startTransition(() => {
      setShowComponent(true);
    });
  };

  return (
    <div>
      <button onClick={handleClick} disabled={isPending}>
        {isPending ? 'Yuklanmoqda...' : 'Komponentni yuklash'}
      </button>
      {showComponent && (
        <Suspense fallback={<p>Komponent yuklanmoqda...</p>}>
          <MyComponent />
        </Suspense>
      )}
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

Ushbu misolda, "Komponentni yuklash" tugmasini bosish o'tishni tetiklaydi. React MyComponent-ni yuklashga ustuvorlik beradi, shu bilan birga UI-ni javob beruvchanligini saqlab qoladi. isPending holati o'tish davom etayotganligini ko'rsatadi, bu esa tugmani o'chirish va foydalanuvchiga vizual fikr-mulohazalar berish imkonini beradi.

Haqiqiy dunyo misollari va senariylari

Ichma-ich Suspense-ning amaliy qo'llanilishini yanada ko'rsatish uchun keling, bir nechta real dunyo senariylarini ko'rib chiqaylik:

• E-tijorat mahsulot sahifasi: Mahsulot sahifasi mahsulot tafsilotlari, sharhlar va tegishli mahsulotlar kabi bir nechta bo'limlarga ega bo'lishi mumkin. Har bir bo'lim ichma-ich Suspense chegaralaridan foydalanib, mustaqil ravishda yuklanishi mumkin. Foydalanuvchi eng muhim ma'lumotlarni iloji boricha tezroq ko'rishi uchun mahsulot tafsilotlarini yuklashga ustuvorlik berishingiz mumkin.
• Ijtimoiy media lentasi: Ijtimoiy media lentasi postlar, izohlar va foydalanuvchi profillaridan iborat bo'lishi mumkin. Ushbu komponentlarning har biri o'zining asinxron bog'liqliklariga ega bo'lishi mumkin. Ichma-ich Suspense ma'lumotlar yuklanayotganda har bir bo'lim uchun joy egallovchi UI-ni ko'rsatishga imkon beradi. Shuningdek, shaxsiylashtirilgan tajribani taqdim etish uchun foydalanuvchining o'z postlarini yuklashga ustuvorlik berishingiz mumkin.
• Boshqaruv paneli ilovasi: Boshqaruv paneli turli manbalardan ma'lumotlarni ko'rsatadigan bir nechta vidjetlarni o'z ichiga olishi mumkin. Ichma-ich Suspense har bir vidjetni mustaqil ravishda yuklash uchun ishlatilishi mumkin. Bu foydalanuvchiga boshqalar hali yuklanayotganda mavjud vidjetlarni ko'rishga imkon beradi, bu esa yanada javob beruvchan va interaktiv tajribani yaratadi.

Misol: E-tijorat mahsulot sahifasi

Keling, e-tijorat mahsulot sahifasida ichma-ich Suspense-ni qanday amalga oshirishingiz mumkinligini ko'rib chiqaylik:

            import React, { Suspense, lazy } from 'react';

const ProductDetails = lazy(() => import('./ProductDetails'));
const ProductReviews = lazy(() => import('./ProductReviews'));
const RelatedProducts = lazy(() => import('./RelatedProducts'));

function ProductPage() {
  return (
    <div>
      <Suspense fallback={<p>Mahsulot tafsilotlari yuklanmoqda...</p>}>
        <ProductDetails />
      </Suspense>

      <div style={{ marginTop: '20px' }}>
        <Suspense fallback={<p>Mahsulot sharhlari yuklanmoqda...</p>}>
          <ProductReviews />
        </Suspense>
      </div>

      <div style={{ marginTop: '20px' }}>
        <Suspense fallback={<p>Tegishli mahsulotlar yuklanmoqda...</p>}>
          <RelatedProducts />
        </Suspense>
      </div>
    </div>
  );
}

export default ProductPage;

            

              
                Copy
              
            
          

Ushbu misolda, mahsulot sahifasining har bir bo'limi (mahsulot tafsilotlari, sharhlar va tegishli mahsulotlar) o'z Suspense chegarasiga o'ralgan. Bu har bir bo'limning mustaqil ravishda yuklanishiga imkon beradi, bu esa yanada javob beruvchan foydalanuvchi tajribasini ta'minlaydi. Shuningdek, yanada vizual jozibali yuklanish ko'rsatkichini ta'minlash uchun har bir bo'lim uchun maxsus skelet komponentidan foydalanishni o'ylashingiz mumkin.

Eng yaxshi amaliyotlar va e'tiborga olinishi kerak bo'lgan jihatlar

React Suspense va ichma-ich yuklanishni boshqarish bilan ishlaganda, quyidagi eng yaxshi amaliyotlarni yodda tutish muhimdir:

• Suspense chegaralarini kichik saqlang: Kichikroq Suspense chegaralari yanada donador yuklanishni boshqarishga va yaxshi foydalanuvchi tajribasiga imkon beradi. Ilovangizning katta qismlarini bitta Suspense chegarasiga o'rashdan saqlaning.
• Maxsus fallback komponentlaridan foydalaning: Oddiy matn xabarlarini skeletlar, aylanuvchilar yoki progress bar kabi vizual jihatdan jozibali va ma'lumotli yuklanish ko'rsatkichlariga almashtiring.
• Xatolarni oqlangan holda boshqaring: Yuklash jarayonida yuzaga keladigan xatolarni ushlash va foydalanuvchiga qulay xabar ko'rsatish uchun Error Boundaries-dan foydalaning.
• Ma'lumotlarni olishni optimallashtiring: Ma'lumotlarni olish va keshni soddalashtirish uchun swr yoki react-query kabi ma'lumotlarni olish kutubxonalaridan foydalaning.
• Unumdorlikni ko'rib chiqing: Suspense komponentlarini haddan tashqari ichma-ich joylashtirishdan saqlaning, chunki bu unumdorlikka ta'sir qilishi mumkin. Komponent ma'lumotlarni yuklashga urinishlar sonini cheklash uchun debansing va tezlikni cheklashdan foydalaning.
• Yuklash holatlaringizni sinab ko'ring: Turli tarmoq sharoitida yaxshi foydalanuvchi tajribasini taqdim etishiga ishonch hosil qilish uchun yuklash holatlaringizni sinchkovlik bilan sinab ko'ring.

Xulosa

React Suspense ilovalaringizda yuklanish holatlarini boshqarishning kuchli va deklarativ usulini taqdim etadi. Yuklanish holatlarini qanday samarali kompozitsiyalashni tushunish orqali, ayniqsa ichma-ich Suspense orqali, siz yanada qiziqarli va javob beruvchi foydalanuvchi tajribalarini yaratishingiz mumkin. Ushbu maqolada keltirilgan eng yaxshi amaliyotlarga amal qilish orqali siz React Suspense-ni o'zlashtirishingiz va asinxron bog'liqliklarni oqlangan holda boshqaradigan mustahkam va unumdor ilovalarni yaratishingiz mumkin.

Foydalanuvchi tajribasiga ustuvorlik berishni, ma'lumotli yuklanish ko'rsatkichlarini taqdim etishni va xatolarni oqlangan holda boshqarishni unutmang. Ehtiyotkorlik bilan rejalashtirish va amalga oshirish bilan React Suspense sizning front-end ishlab chiqish arsenalingizda qimmatli vosita bo'lishi mumkin.

Ushbu usullarni qo'llash orqali siz ilovalaringiz foydalanuvchilarga, ularning joylashuvi yoki tarmoq sharoitidan qat'iy nazar, silliq va yoqimli tajriba taqdim etishini ta'minlashingiz mumkin.